<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var box1 =document.getElementById("box1");
	var box2 =document.getElementById("box2");
	var box3 =document.getElementById("box3");
	// 事件的传播：1.捕获阶段：从祖先元素向目标元素进行事件的捕获，但是默认此时不会触发事件 2.目标阶段：事件捕获到目标元素，捕获结束在目标元素上触发事件 3.冒泡阶段：事件从目标元素向祖先元素传递，依次触发祖先元素上的事件
	// 如果希望在捕获阶段就触发事件，可以将addEventListener第三个参数改成true,一般情况下不会希望在捕获阶段执行事件
	box1.addEventListener("click",function(){
		alert("box1")
	},false)
	box2.addEventListener("click",function(){
		alert("box2")
	},true)
	box3.addEventListener("click",function(){
		alert("box3")
	},false)
</script>
<style type="text/css">
	#box1{
		width: 18.75rem;
		height: 18.75rem;
		background-color: #F2F2F2;
	}
	#box2{
		width: 12.5rem;
		height: 12.5rem;
		background-color: #FFFF00;
	}
	#box3{
		width: 6.25rem;
		height: 6.25rem;
		background-color: #FF0000;
	}
</style>
